<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">填表人</label>
            <div class="layui-input-inline">
                <input type="tel" name="fill_from" value="{$data['fill_from']}" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">出差人数</label>
            <div class="layui-input-inline">
                <input type="text" name="number_people" value="{$data['number_people']}"   autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">填表时间</label>
            <div class="layui-input-inline">
                <input type="text" name="fill_time" id="fill_time" lay-verify="date" value="{$data['fill_time']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">起止</label>
            <div class="layui-input-inline">
                <input type="text" name="start_time" id="start_time" placeholder="日期" lay-verify="date" value="{$data['start_time']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">起止</label>
            <div class="layui-input-inline">
                <input type="text" name="start_site" id="start_site" placeholder="地点" value="{$data['start_site']}"   autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">止点</label>
            <div class="layui-input-inline">
                <input type="text" name="end_time" placeholder="日期" id="end_time" lay-verify="date" value="{$data['end_time']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">止点</label>
            <div class="layui-input-inline">
                <input type="text" name="end_site" placeholder="地点" id="end_site"  value="{$data['end_site']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">伙食补助</label>
            <div class="layui-input-inline">
                <input type="text" name="eat_subsidy_day" value="{$data['eat_subsidy_day']}"  autocomplete="off" placeholder="天数" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">伙食补助</label>
            <div class="layui-input-inline">
                <input type="text" name="eat_subsidy_standard" placeholder="标准" value="{$data['eat_subsidy_standard']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">伙食补助</label>
            <div class="layui-input-inline">
                <input type="text" name="eat_subsidy_money" id="eat_subsidy_money" placeholder="金额" value="{$data['eat_subsidy_money']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">住宿费</label>
            <div class="layui-input-inline">
                <input type="text" name="stay_day" placeholder="天" value="{$data['stay_day']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">住宿费</label>
            <div class="layui-input-inline">
                <input type="text" name="stay_standard" placeholder="标准" value="{$data['stay_standard']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">住宿费</label>
            <div class="layui-input-inline">
                <input type="text" name="stay_money" id="stay_money" placeholder="金额" value="{$data['stay_money']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">车船费</label>
            <div class="layui-input-inline">
                <input type="text" name="traffic_kind"  placeholder="种类" value="{$data['traffic_kind']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">车船费</label>
            <div class="layui-input-inline">
                <input type="text" name="traffic_money" id="traffic_money" placeholder="金额" value="{$data['traffic_money']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">卧铺补助</label>
            <div class="layui-input-inline">
                <input type="text" name="sleeper_standard" placeholder="标准" value="{$data['sleeper_standard']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">卧铺补助</label>
            <div class="layui-input-inline">
                <input type="text" name="sleeper_money" id="sleeper_money" placeholder="金额" value="{$data['sleeper_money']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">市内交通费</label>
            <div class="layui-input-inline">
                <input type="text" name="city_traffic_day"  autocomplete="off" value="{$data['city_traffic_day']}" placeholder="天数" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">市内交通费</label>
            <div class="layui-input-inline">
                <input type="text" name="city_traffic_standard" placeholder="标准" value="{$data['city_traffic_standard']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">市内交通费</label>
            <div class="layui-input-inline">
                <input type="text" name="city_traffic_money" id="city_traffic_money" placeholder="金额" value="{$data['city_traffic_money']}"  autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">路桥费</label>
            <div class="layui-input-inline">
                <input type="text" name="road_bridge_money" id="road_bridge_money"  autocomplete="off" value="{$data['road_bridge_money']}" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">其他</label>
            <div class="layui-input-inline">
                <input type="text" name="other"  autocomplete="off" class="layui-input" value="{$data['other']}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">合计</label>
            <div class="layui-input-inline">
                <input type="text" name="total" id="total" autocomplete="off" class="layui-input" value="{$data['total']}">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">出差人</label>
            <div class="layui-input-inline">
                <input type="text" name="business_people"  autocomplete="off" class="layui-input" value="{$data['business_people']}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">室(部)负责人</label>
            <div class="layui-input-inline">
                <input type="text" name="department_head"  autocomplete="off" class="layui-input" value="{$data['department_head']}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">分管领导</label>
            <div class="layui-input-inline">
                <input type="text" name="brancher_leader"  autocomplete="off" class="layui-input" value="{$data['brancher_leader']}">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">办公室主任</label>
            <div class="layui-input-inline">
                <input type="text" name="office_director"  autocomplete="off" class="layui-input" value="{$data['office_director']}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">主管办公室副书记</label>
            <div class="layui-input-inline">
                <input type="text" name="secretary"  autocomplete="off" placeholder="壹万元及以上" class="layui-input" value="{$data['secretary']}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">审批领导</label>
            <div class="layui-input-inline">
                <input type="text" name="examine_leader"  autocomplete="off" class="layui-input" value="{$data['examine_leader']}">
            </div>
        </div>
    </div>

    <div class="layui-upload" style="margin-left: 20px">
        <button type="button" class="layui-btn" id="upload_expense" style="float: left">上传报销单原件</button>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1" value="" src="{$data['file_id']}">
            <p id="demoText"></p>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="file_id" id="file_id">
            <input type="hidden" name="id" value="{$data['id']}">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="addUser">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<style>
    .layui-upload-img {
        width: 92px;
        height: 92px;
        margin: 0 10px 10px 0;
    }
</style>
<script>

    $(document).on('change', '#eat_subsidy_money,#stay_money,#traffic_money,#sleeper_money,#city_traffic_money,#road_bridge_money', function(){
        var _this = $(this);
        var eat_subsidy_money =   parseInt($('#eat_subsidy_money').val())
            ,stay_money =         parseInt($('#stay_money').val())
            ,traffic_money =      parseInt($('#traffic_money').val())
            ,sleeper_money =      parseInt($('#sleeper_money').val())
            ,city_traffic_money = parseInt($('#city_traffic_money').val())
            ,road_bridge_money = parseInt($('#road_bridge_money').val());
        var total = 0;
        if(!isNaN(eat_subsidy_money))  total +=  eat_subsidy_money;
        if(!isNaN(stay_money))  total +=  stay_money;
        if(!isNaN(traffic_money))  total +=  traffic_money;
        if(!isNaN(sleeper_money))  total +=  sleeper_money;
        if(!isNaN(city_traffic_money))  total +=  city_traffic_money;
        if(!isNaN(road_bridge_money))  total +=  road_bridge_money;
        $('#total').val(total);

    });
    layui.use(['form', 'laydate','upload'], function(){
        var form = layui.form
            , layer = layui.layer
            ,upload = layui.upload
            ,laydate = layui.laydate;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#upload_expense'
            ,url: '{:url("/finance/Expense/uploadImg")}' //改成您自己的上传接口
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code < 0){
                    return layer.msg('上传失败');
                }
                $('#file_id').val(res.data.file_id);
                return layer.msg('上传成功');
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //日期
        laydate.render({
            elem: '#fill_time'
        });
        laydate.render({
            elem: '#start_time'
        });
        laydate.render({
            elem: '#end_time'
        });
        //监听提交
        form.on('submit(addUser)', function(data){

            $.ajax({
                url: '{:url("/finance/Expense/ajaxEditExpense")}',
                type: 'post',
                dataType: 'json',
                data:{data:data.field},
                beforeSend: function () {
                    layer.load(2);
                },
                complete: function () {
                    layer.closeAll('loading');
                },
                success: function (res) {
                    if(res.code == 1){
                        layer.msg('编辑成功', {icon: 1});

                        layer.closeAll();
                        return false;
                    }
                    layer.alert(res.msg, {icon: 2}); return false;
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('网络失败，请联系管理员', {icon: 2});
                }
            });
            return false;
        });
    });
</script>